<template>
    <div>
        <Header :msg="msg"></Header>
        <div class="wrap" ref="wrap">
            <van-list
                v-model="loading"
                :finished="finished"
                :immediate-check="false"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <div class="banner">
                    <van-swipe :autoplay="3000" :height="230">
                        <van-swipe-item
                            v-for="item in banner"
                            :key="item.designTemplateId"
                        >
                            <img
                                v-lazy="
                                    'https:' +
                                    item.designTemplateImageUrl +
                                    '?x-oss-process=image/resize,w_300/format,jpg'
                                "
                                alt=""
                            />
                        </van-swipe-item>
                    </van-swipe>
                </div>
                <!-- 场景icon列表 -->
                <ul class="icon_wrap">
                    <li v-for="item in homeList.scene" :key="item.designKindId">
                        <router-link :to="'/list/' + item.designKindId">
                            <img :src="'https:' + item.thumbUrl" alt="" />
                            <h4>{{ item.name }}</h4>
                        </router-link>
                    </li>
                </ul>
                <!-- 推荐专题 -->
                <div class="theme_wrap">
                    <h2>推荐专题</h2>
                    <div class="theme_list">
                        <ul :style="{ width: themeList.length * 2.6 + 'rem' }">
                            <li v-for="item in themeList" :key="item.id">
                                <router-link :to="'/tuijian/'+item.id">
                                    <h4>{{ item.title }}</h4>
                                    <p>{{ item.themeDescribe }}</p>
                                    <div class="sector"></div>
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 场景列表 -->
                <div v-if="sceneList" class="sceneList">
                    <scene-list
                        v-for="item in sceneList"
                        :key="item.kindId"
                        :list="item"
                    ></scene-list>
                </div>
            </van-list>
        </div>
        <!-- 返回顶部 -->
        <BackTop :height="100">
            <div id="backTop">
                <i class="iconfont icon-shang goback_icon"></i>
            </div>
        </BackTop>
    </div>
</template>
<script>
// 引入场景列表组件
import SceneList from "../../components/SceneList";

import Header from "../../components/Header";
export default {
    data() {
        return {
            msg: "200000+免费模板任你搜索",
            homeList: {},
            themeList: [],
            sceneList: [],
            banner: [],
            page: 1,
            loading: false, // 是否处于触底加载状态
            finished: false, // 是否已加载完成
        };
    },
    components: {
        Header,
        SceneList,
    },
    created() {
        this.getList();
        this.getThemeList();
        this.getBanner();
    },
    methods: {
        async getList() {
            let res = await this.$fetch(
                "/mobile/main/getMainMiniProgramHomeInfo.do?_dataType=json&_dataClientType=3&_dataClientType=3&client_type=40"
            );
            this.homeList = res.body.data;
            // console.log(this.homeList);
            this.sceneList.push(...res.body.data.sceneDetails.sceneDetail);
            // console.log(this.sceneList);
        },
        async getThemeList() {
            let res = await this.$fetch(
                "/solutionSubject/theme.do?_dataType=json&_dataClientType=3&_dataClientType=3&client_type=40&solutionSubjectId=1&pageNum=1&pageSize=6&templatePageSize=6&type=3&device=2"
            );
            this.themeList = res.body.data.themes;
        },
        async onLoad() {
            this.page++;
            // console.log("触底"+this.page);
            this.loading = true;
            let res = await this.$fetch(
                `/mobile/main/getSceneDetail.do?_dataType=json&_dataClientType=3&_dataClientType=3&client_type=40&page_no=${this.page}`
            );
            this.sceneList.push(...res.body.data.sceneDetail);
            // console.log(this.sceneList);
            this.loading = false;
            if (this.page > 2) {
                this.finished = true;
            }
        },
        async getBanner() {
            let res = await this.$fetch(`
                /mobile/main/getSceneDetail.do?_dataType=json&_dataClientType=3&_dataClientType=3&client_type=40&page_no=2
            `);
            this.banner = res.body.data.sceneDetail[1].templates;
            // console.log(this.banner);
        },
    },
};
</script>
<style lang="scss" scoped>
div {
    .wrap {
        // background-color: skyblue;
        padding: 1.2rem 0;
        .icon_wrap {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 0.2rem 0;
            background-color: white;
            // margin-top: 0.08rem;
            li {
                width: 1.6rem;
                text-align: center;
                margin: 0.1rem 0;
                img {
                    width: 1rem;
                }
                h4 {
                    font-size: 0.26rem;
                    margin-top: 0.1rem;
                    color: #333;
                }
            }
        }
        .theme_wrap {
            padding: 0.2rem 0;
            background-color: white;
            margin-top: 0.1rem;
            h2 {
                text-indent: 0.2rem;
                font-size: 0.32rem;
                padding: 0.1rem 0;
            }
            ::-webkit-scrollbar {
                width: 0;
                display: none;
            }
            .theme_list {
                overflow: auto;
                margin-top: 0.2rem;
                ul {
                    // height: 1.6rem;
                    display: flex;
                    padding-left: 0.2rem;
                    li {
                        width: 2rem;
                        margin: 0.1rem 0.2rem;
                        padding: 0.2rem 0.1rem;
                        text-indent: 0.1rem;
                        background-color: white;
                        box-shadow: 0 0 0.1rem rgba(200, 200, 200, 1);
                        position: relative;
                        overflow: hidden;
                        a {
                            font-size: 0.28rem;
                            color: #333;
                            .sector {
                                width: 1rem;
                                height: 1rem;
                                border-radius: 50%;
                                background-color: tomato;
                                position: absolute;
                                right: -0.5rem;
                                bottom: -0.5rem;
                            }
                            p {
                                font-size: 0.26rem;
                                padding-top: 0.1rem;
                                color: #666;
                            }
                        }
                    }
                }
            }
        }
        .sceneList {
            .load {
                font-size: 0.3rem;
                padding-top: 0.3rem;
                padding-bottom: 0.2rem;
                text-align: center;
            }
        }
    }
    .banner {
        // height: 4.16rem;
        .van-swipe-item {
            img {
                display: block;
                width: 100%;
            }
        }
    }
}
</style>